<template>
    <div class="hotPlay" style="padding-bottom:55px;">
        <!-- <ul>
            <li v-for="film in dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}
                    <span class="item">{{film.filmType.name}}</span>
                </h3>
                <p>观众评分:
                    <span style="color:#ffb232">{{film.grade}}</span>
                </p>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>
                <p>
                    <span>{{film.nation}}</span> |
                    <span>{{film.runtime}}分钟</span>
                </p>
                
            </li>
        </ul> -->

        <vant-list 
            v-model="isLoading"
            @load="onload"
            :finished="isFinished"
            finished-text="没有啦！！！"
            :immediate-check="false">
                <van-cell v-for="film in dataList" :key="film.filmId">
                    <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                    <h3>{{film.name}}</h3>
                    <p class="actor">主演:{{film.actors | actorsfilter}}</p>
                </van-cell>
        </vant-list>
                

    </div>
</template>
<script>
    import http from '@/utils/http.js'
    import Vue from 'vue'
    // 引入vant插件（相当于element-ui插件）
    import {List,Cell} from "vant"

    Vue.use(List).use(Cell)
    Vue.filter('actorsfilter',(actors) => {
        // console.log(actors);
        return actors.map(item => item.name).join(' ')
    })
    export default {
        data() {
            return {
                dataList:[],
                dataList:[],
                isLoading:false,
                current:1,
                total:0,
                isFinished:false
            }
        },
        mounted() {
            http({
                url:`/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=8816181`,
                headers:{
                'X-Host': 'mall.film-ticket.film.list'
                }
            }).then((res) => {
                // console.log(res)
                this.dataList = res.data.data.films
                // 保存总条数
                this.total=res.data.data.total
                })
        },
        methods: {
            goDetail(id){
                // console.log(id);
                this.$router.history.push("/detail/" + id)
            }
        },
        onload(){
            // 判断是否加载完毕
            if(this.dataList.length===this.total){
                this.isFinished=true; //加载完毕的设置
                return;

            }
            // 正在加载
            this.isLoading=true
            this.current++
            http({
                url: `/gateway?cityId`,
                headers:{
                    'X-Host':''
                }

            }).then((res)=>{
                // 把后面页数的数据追加到原来的数据中
                // this.dataList=[].concat(this.dataList,res.data.data.films)
                // 简写
                this.dataList=[...this.dataList,...res.data.data.films]
                // 当前页加载完毕
                this.isLoading=false
            })
        }
    }
</script>
<style lang="scss" scoped>
    .van-cell{
        overflow: hidden;
        padding: 10px;
        img{
            float: left;
            width: 100px;
        }
    } 
    .actor{
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>